<template>
      <el-button type="info" @click="beginShow">图片</el-button>

    <teleport to="body">
        <div v-if="showModal" class="image-modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2 class="title">{{ props.articleName }}</h2>
                    <div class="action-buttons">
                        <el-button type="success" @click="updateDate">保存修改</el-button>
                        <el-button @click="downShow">关闭</el-button>
                    </div>
                </div>

                <div class="paragraph-list">
                    <div v-for="item in data" :key="item.id" class="paragraph-item">
                        <div class="content-box">
                            <p class="paragraph-text">{{ item.content }}</p>
                            <el-upload class="image-uploader" action="http://localhost:8080/fileupdate/ImageUpdate"
                                :show-file-list="false"
                                :on-success="(res, file) => handleAvatarSuccess(res, file, item.id)"
                                :before-upload="beforeAvatarUpload">
                                <template #trigger>
                                    <div class="upload-area">
                                        <img v-if="item.imageUrl" :src="item.imageUrl" class="preview-image" />
                                        <div v-else class="upload-placeholder">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                            <span class="tip">点击上传图片</span>
                                        </div>
                                    </div>
                                </template>
                            </el-upload>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </teleport>
</template>

<script setup name="Addimage" lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus';
let showModal = ref(false);
let beginShow = () => {
    showModal.value = true;
    getDate();
}
let downShow = () => {
    showModal.value = false;
}

let data = ref([
    {
        id: 20,
        articleId: 21,
        content: "你的人生呢",
        imageUrl: null,
        updateTime: "2025-04-26T11:15:05",
        createTime: "2025-04-26T11:15:05"
    }
])


const props = defineProps({
    articleId: {
        type: Number,
        required: true
    },
    articleName: {
        type: String,
        required: true
    },
})
let getDate = async () => {
    try {
        const response = await axios.get('http://localhost:8080/pagagraph/getParagraphList', {
            params: {
                articleId: props.articleId
            }
        })
        data.value = response.data.data
    } catch (error) {
        ElMessage.error('获取数据失败');
        data.value = []
    }
}
//   图片上传区


// 修改handleAvatarSuccess方法
const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile,
    paragraphId
) => {
    // 根据段落ID找到对应的数据项
    const paragraph = data.value.find(item => item.id === paragraphId);
    if (paragraph) {
        // 假设后端返回的数据结构为 { data: "图片URL" }
        paragraph.imageUrl = response.data;
    }
};

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg') {
        ElMessage.error('Avatar picture must be JPG format!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('Avatar picture size can not exceed 2MB!')
        return false
    }
    return true
}

//上传数据
let updateDate = async () => {
    try {
        const response = await axios.post('http://localhost:8080/pagagraph/updateImages', data.value)
        if (response.data.success) {
            ElMessage.success('上传成功');
        }
    } catch (error) {
        ElMessage.error('获取数据失败');
    }
}


</script>

<style scoped>
.image-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.3s;
}

.modal-content {
    background: white;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.title {
    margin: 0;
    color: #333;
    font-size: 1.5rem;
}

.action-buttons {
    display: flex;
    gap: 12px;
}

.paragraph-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.paragraph-item {
    margin-bottom: 24px;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.2s;
}

.paragraph-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.content-box {
    padding: 16px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.paragraph-text {
    flex: 1;
    margin: 0;
    line-height: 1.6;
    color: #444;
}

.image-uploader {
    flex-shrink: 0;
}

.upload-area {
    width: 150px;
    height: 150px;
    border: 2px dashed #ddd;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.3s;
}

.upload-area:hover {
    border-color: #409eff;
}

.preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #999;
}

.upload-placeholder .el-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.tip {
    font-size: 0.9rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
</style>